<template>
  <div class="core-head px-16">
    <div class="flex align-center gc-4">
      <div class="icon-button sidebar-expand" @click="showSidebar = true">
        <img :src="fold" alt="" width="16" />
      </div>
      <img :src="logo" width="20" />
      <span class="text-bold text-14">网阁</span>
    </div>
    <div class="flex gc-4 align-center gc-12">
      <About></About>
      <div
        class="flex gc-4 align-center text-666 core-button server-button"
        @click="server = true"
      >
        服务器
        <div class="icon-button">
          <img :src="serverPng" width="20" />
        </div>
      </div>
      <div class="core-button linear-gradient" @click="share = true">
        <button class="w-100 h-100">共享中心</button>
      </div>
    </div>
  </div>
  <ShareVue v-model:visiable="share"></ShareVue>
  <Server v-model:server="server"></Server>
</template>

<script setup lang="ts">
  import logo from '@/assets/images/logo.png';
  import serverPng from '@/assets/images/server.png';
  import { ref } from 'vue';
  import fold from '@/assets/images/expand.png';
  import ShareVue from './share/Share.vue';
  import Server from './server/Server.vue';
  import { showSidebar } from '../bus';
  import About from './about/About.vue';

  const share = ref(false);
  const server = ref(false);
</script>

<style lang="scss" scoped>
  .core-head {
    height: 48px;
    background-color: #f8f8f8;
    padding: 0 16px;
    min-height: 48px;
  }
  .sidebar-expand {
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: none;
  }

  @media screen and (max-width: 750px) {
    .sidebar-expand {
      display: inline-flex !important;
    }
  }
  .server-button {
    &:hover {
      background-color: #eee;
    }
  }
</style>
